import React, { useEffect, useState } from 'react';
import './index.less';
import Search from './components/search';

export default function () {
  const [tag, setTag] = useState([
    { id: 1, name: '普通讲师', ishow: true },
    { id: 2, name: '高级讲师', ishow: false },
    { id: 3, name: '特聘讲师', ishow: false },
    { id: 4, name: '超级讲师', ishow: false },
  ]);
  const [selectTag, setSelectTag] = useState(1); //  选中的id
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1); // 当前页数

  var scale =
    document.documentElement
      .clientWidth; /* 获取布局视口的宽度，也就是浏览器宽度*/
  var font_size = scale / 3.75; /* 经过换算，动态计算不同设备的font-size值  */
  document.documentElement.style.fontSize =
    font_size + 'px'; /* 设置 html的font-size属性*/

  function tabClick(item) {
    setSelectTag(item.id);
    let arr1 = [];
    arr1 = tag.map((i) => {
      return { ...i, ishow: i.id == item?.id ? true : false };
    });
    setTag(arr1);
    setPage(1);
  }
  return (
    <div>
      {/* tab 选择 */}
      <div style={{ position: 'sticky', top: '0px' }}>
        <div className="footer_tag">
          {tag.map((item, index) => {
            return (
              <div
                key={item.id}
                className={
                  item.ishow
                    ? 'footer_tag_item footer_tag_item_action'
                    : 'footer_tag_item'
                }
                onClick={() => {
                  tabClick(item);
                }}
              >
                {' '}
                {item.name}{' '}
              </div>
            );
          })}
        </div>
      </div>
      <Search page={page} status={selectTag} data={data} />
    </div>
  );
}
